<template>
	<view class="box">
		<!-- 导航栏 -->
		<navBar title='修改信息' :isSlot="false" :isNav="false"></navBar>

		<view class="setMyInformation">
			<view class="setMyPhoto" @click="setMyPhoto">
				<u-upload ref='chooseFile' :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1"
					multiple :maxCount="1" :previewFullImage="false"></u-upload>
			</view>
			<view class="setMyInformationTextBox">
				<u--form labelWidth="80" labelPosition="left" :model="form" :rules="rules" ref="form">
					<u-form-item prop="userName" label="昵称" borderBottom>
						<u--input border="none" v-model="form.userName" @change="setMyInformation()"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<u-form-item prop="texts" label="个性签名" borderBottom>
						<u--input border="none" v-model="form.texts" @change="setMyInformation()"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u--form>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	import {
		setEdit,
		searchUser
	} from "@/config/api.js"

	export default {
		data() {
			return {
				fileList: [],
				form: {
					cover: '',
					userName: '',
					texts: '' || " "
				},
				rules: {
					userName: {
						required: true,
						message: "请输入昵称",
						trigger: ['change', 'blur'],
					},
					texts: {
						required: true,
						message: "请输入个性签名",
						trigger: ['change', 'blur'],
					},
				}
			};
		},
		onLoad() {
			this.myData()
			console.log(this.userInfo);
		},
		methods: {
			...mapMutations(['upUserInfoData']),
			deletePic() {
				this.fileList.splice(0, 1)
			},

			async afterRead(e) {
				const imgStatus = {
					status: 'uploading',
					message: '上传中'
				}

				this.fileList.push(imgStatus)
				uni.uploadFile({
					url: "https://eggblog.bluej.cn/api/imgUpload",
					filePath: e.file[0].url,
					name: "file",
					header: {
						"x-token": this.userInfo.token
					},
					success: (res) => {
						const filData = JSON.parse(res.data)
						this.form.cover = filData.data[0]
						this.$set(this.fileList, 0, {
							status: 'success',
							url: filData.data[0]
						})
						this.setMyInformation()
					}
				})
			},
			myData() {
				this.fileList = [{
					status: 'success',
					url: this.userInfo.avatar
				}]
				this.form.userName = this.userInfo.name
				this.form.texts = this.userInfo.desc
				this.form.cover = this.userInfo.avatar
			},
			setMyPhoto() {
				this.$refs.chooseFile.chooseFile()
				this.fileList.splice(0, 1)
			},
			async setMyInformation() {
				const res = await setEdit({
					name: this.form.userName,
					avatar: this.form.cover,
					desc: this.form.texts,
					projectId: 162
				}, this.userInfo.token)
				const ress = await searchUser({
					id: this.userInfo.id,
					projectId: 162
				}, this.userInfo.token)
				this.upUserInfoData(ress.data.data)

			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		// watch: {
		// 	// 监听文件列表的变化，重新整理内部数据
		// 	form: {
		// 		// immediate: true,
		// 		deep: true,
		// 		async handler() {
		// 			const res = await setEdit({
		// 				name: this.userName,
		// 				avatar: this.cover || this.userInfo.avatar,
		// 				desc: this.texts,
		// 				projectId: 162
		// 			}, this.userInfo.token)
		// 		}
		// 	},
		// },
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 3vw;

		.setMyInformation {
			width: 100%;
			height: 30vh;
			display: flex;
			flex-direction: column;

			.setMyPhoto {
				width: 100%;
				height: 10vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.setMyInformationTextBox {
				flex: 1;
				display: flex;
			}
		}
	}

	::v-deep .u-upload {
		flex: 0;
		border-radius: 50%;
	}

	::v-deep .u-upload__button {
		border-radius: 50%;
	}

	::v-deep .u-form {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
	}

	::v-deep .u-upload__wrap__preview {
		border-radius: 50%;
	}

	/*	#ifdef MP-WEIXIN */
	::v-deep .u-upload.data-v-69e2a36e{
		flex: 0;
	}
	
	::v-deep .u-upload__wrap__preview.data-v-69e2a36e {
		border-radius: 50%;
	}

	/* #endif */
	
	
</style>
